/*
 * @Description: 站点下线路的小模块
 * @Author: yingying.fan
 * @Date: 2019-07-01 12:55:15
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 12:55:15
 */
<template>
  <div
    class="flex-h flex-vc line-bus-wrapper"
    @click="goToLineDetail"
  >
    <!-- 收藏图标 -->
    <i
      class="line-collection"
      :class="{'iconfont icon-shoucang1':busInfo.isCollected}"
    ></i>
    <!-- @click="collect" -->
    <!-- 线路名称 -->
    <p class="line-bus-name">{{routeName}}</p>
    <!-- 车辆信息和终点站 -->
    <div class="flex1">
      <p
        class="baseColorNoAcitve fontsize24 stop-num-wrapper"
        v-if="stopNum"
      >
        <font
          class="bus-stop-num"
          v-if="stopNum.num"
        >{{stopNum.num}}</font>
        {{stopNum.info}}
      </p>
      <div class="flex-h bus-end-station-wrapper">
        <span class="bus-end-station">
          开往&nbsp;&nbsp;{{busInfo.endStation}}终点站
        </span>
        <i
          v-if="hasTwoDirection"
          class="iconfont icon-revesing"
          @click.stop="reverseDirection"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import { setRouteCollected } from './CollectionUtils.js'
const BUS_IS_ARRIVED = -99 // 已经到站
const BUS_SOON_ARRIVE = 0 // 即将到站
const BUS_NO_INFO = -1 // 无车辆信息
export default {
  components: {

  },
  props: {
    // 线路公交信息
    busInfoList: {
      type: Array,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      index: 0
    }
  },
  computed: {
    // 线路是否有两个方向
    hasTwoDirection() {
      return this.busInfoList && this.busInfoList.length > 1
    },
    busInfo() {
      return this.busInfoList ? this.busInfoList[this.index] : {}
    },
    routeName() {
      if (escape(this.busInfo.routeName).indexOf('%u') < 0) {
        // 路线名中如果没有中文则加上路
        return `${this.busInfo.routeName}路`
      }
      return this.busInfo.routeName
    },
    stopNum() {
      if (!this.busInfo) {
        return null
      }
      switch (this.busInfo.stopNum) {
        case BUS_IS_ARRIVED:
          return {
            num: '已到站',
            info: ''
          }
        case BUS_SOON_ARRIVE:
          return {
            num: '即将到站',
            info: ''
          }
        case BUS_NO_INFO:
          return null
        default:
          return {
            num: this.busInfo.stopNum + '',
            info: '站'
          }
      }
    }
  },
  methods: {
    // 换向
    reverseDirection() {
      if (this.index === 0) {
        this.index = 1
      } else {
        this.index = 0
      }
    },
    // 跳转到线路详情
    goToLineDetail() {
      // 埋点
      let recordInfo = {
        NAERBY_LINE_ID: this.busInfo.routeId + '',
        NAERBY_LINE_NAME: this.busInfo.routeName + ''
      }
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.doRecordEvent(
          'home_line_nearby',
          recordInfo,
          1,
          () => { },
          () => { }
        )
      })
      // 跳转
      let params = `BUS_DIRECTION=${this.busInfo.direction}&NAME=${this.busInfo.routeName}&ID=${this.busInfo.routeId}&STOP_ID=${this.busInfo.stationId}`
      let url = 'xbapp://open/bus-app/Line.html?_tv=true&' + params
      if (window.prodInApp) {
        window.location.assign(url)
      } else {
        console.log('~~~goToLineDetail~~~', url)
      }
    },
    // 不可以点击收藏或取消收藏，所以暂不添加点击事件
    collect() {
      let {
        routeId,
        direction,
        routeName,
        startStation,
        endStation,
        startTime,
        endTime,
        price
      } = this.busInfo
      setRouteCollected(
        this.busInfo.isCollected,
        routeId,
        direction,
        routeName,
        startStation,
        endStation,
        startTime,
        endTime,
        price
      ).then(isCollected => {
        console.log('收藏', isCollected)
      })
    }
  }
}
</script>

<style>
/* 最外层div */
.line-bus-wrapper {
  /* width: 620px; */
  min-width: 520px;
  max-width: 620px;
  height: 140px;
  background-color: #f9f9f9;
  margin-right: 10px;
  color: #333333;
  line-height: 1.4;
}
/* 收藏样式 */
.line-collection {
  display: inline-block;
  width: 46px;
  padding: 30px 0;
  text-align: center;
  color: #ff9938;
  font-size: 28px;
}
/* 线路名称样式 */
.line-bus-name {
  /* min-width: 112px; */
  max-width: 232px;
  margin-right: 40px;
  font-weight: bold;
  font-size: 40px; /*px*/
}
/* 整个站点距离div */
.line-bus-name + div {
  /* min-height: 90px; */
  /* padding-right: 20px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stop-num-wrapper {
  padding-bottom: 10px;
}
/* 站点距离样式 */
.bus-stop-num {
  font-weight: bold;
  font-size: 40px; /*px*/
}
/* 终点站的包裹层 */
.bus-end-station-wrapper {
  width: 100%;
  position: relative;
}
.bus-end-station {
  margin-right: 80px;
}
.line-bus-name,
.bus-end-station {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 换向按钮 */
.icon-revesing {
  position: absolute;
  top: -22px;
  right: 0;
  width: 30px;
  height: 30px;
  color: #999999;
  padding: 20px 30px 20px 10px;
  /* margin-top: 52px; */
  font-size: 28px;
}
</style>
